<template>
	<view class="content">
		<view class="title">
			<image src="/static/23.png"></image>
		</view>
		<view class="slide">
			<view class="slide-scorll">
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
				<image src="/static/b1.png"></image>
			</view>
		</view>
		<view class="dou">
			<view class="dou-left">
				<image src="/static/mk.png"></image>
				<view>喜豆：0.00</view>
			</view>
			<view class="dou-right">
				<image src="/static/sp.png"></image>
				<view>金盲卡：0 张</view>
			</view>
		</view>
		<MH />
		<view class="bottom">
			<view class="left">
				<image src="/static/dckx.png"></image>
			</view>
			<view class="center">
				<image src="/static/dckx.png"></image>
			</view>
			<view class="bottom-right">
				<view>0</view>
				<view>金钥匙</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MH from "./compent/index.vue"
	export default {
		components: {
			MH
		},
		data() {
			return {
				title: 'Hello',
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-image: url("@/static/bg.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;

		.title {
			text-align: center;
			padding-top: 70px;
			width: 100%;
			font-size: 40px;
			color: lightpink;

			image {
				width: 260px;
				height: 60px;
			}
		}

		.slide {
			width: 80%;
			margin: 0 auto;
			margin-top: 20px;
			border-radius: 40px;
			height: 65px;
			border: 6px solid #373a61;
			background-color: #b7b1e1;

			.slide-scorll {
				overflow-x: auto;
				white-space: nowrap;
				scrollbar-width: none;
				width: 92%;
				margin-left: 5px;
				// margin: 0 auto;
				/* Firefox */
				-ms-overflow-style: none;

				image {
					padding-top: 8px;
					width: 50px;
					height: 50px;
					margin-left: 15px;
				}

				// image:first-child {
				// 	margin-left: 0;
				// 	/* 移除第一个项目的左边距 */
				// }
			}

			/* 对于Webkit内核浏览器（Chrome, Safari等） */
			.slide-scorll::-webkit-scrollbar {
				display: none;
			}
		}

		.dou {
			width: 100%;
			display: flex;
			margin-top: 15px;
			justify-content: center;
			color: #fff;

			.dou-left {
				background-color: #8d35a1;
				background: linear-gradient(to right, #8d35a1, #32236d);
				margin-right: 75px;
				display: flex;
				font-size: 15px;
				padding: 1px 8px 1px 1px;

				image {
					width: 25px;
					height: 25px;
				}

				:nth-child(2) {
					line-height: 25px;
					margin-left: 4px;
				}
			}

			.dou-right {
				background-color: #8d35a1;
				display: flex;
				background: linear-gradient(to right, #8d35a1, #32236d);
				font-size: 15px;
				padding: 1px 8px 1px 1px;

				image {
					width: 25px;
					height: 25px;
				}

				:nth-child(2) {
					line-height: 25px;
					margin-left: 4px;
				}
			}
		}

		.bottom {
			position: relative;
			width: 100%;
			bottom: 80px;
			display: flex;
			justify-content: center;
			align-items: center;

			.left {
				width: 40%;
				text-align: right;

				image {
					width: 120px;
					height: 40px;
				}
			}

			.center {
				width: 40%;
				text-align: right;

				image {
					width: 120px;
					height: 40px;
				}
			}

			.bottom-right {
				text-align: center;

				:nth-child(1) {
					font-size: 40px;
					color: #bd7df6;

				}

				:nth-child(2) {
					font-size: 16px;
					color: #fff;
				}
			}
		}
	}
</style>